<template>
  <div class="zz-root">
      <div class="dd-hr">
          <divider>专题</divider>
      </div>
      <div class="hh-zhe" v-for="sf in zhuan">
        <div class="dao-img">
            <img :src='sf.image_url'/>
            <div class="zhong">
                <div class="jian">
                    <p style="margin:0px;">{{sf.description}}</p>
                    <span style="font-size:12px;">查看详情 ></span>
                </div>
            </div>
            <span class="fa fa-caret-up"></span>
        </div>
        <!--<Scroller lock-y :scrollbar-x=false>
            <div class="src-box">
                <img src='sf.inventory_list' />
                <p>1234</p>
                <span></span>
            </div>
        </Scroller>-->
      </div>
  </div>
</template>

<script>
import {Divider,Scroller} from 'vux'
export default {
    components:{
        Divider,
        Scroller
    },
    props:['zhuan'],
}
</script>

<style scoped>
.zz-root{
    background-color: white;
}
.dd-hr{
    padding: 5px;
}
.dao-img{
    width: 100%;
    height: 180px;
    position: relative;
}
.dao-img img{
    width: 100%;
    height: 100%;
}
.zhong{
    width: 200px;
    height: 110px;
    /*background-color: grey;*/
    position: absolute;
    top:calc(50% - 55px);
    left:calc(50% - 100px);
    box-sizing: border-box;
    padding: 5px;
    border:1px solid white;
}
.fa-caret-up{
    position: absolute;
    bottom: -5px;
    left:50%;
    color: white;
}
.jian{
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: center;
    box-sizing: border-box;
    padding: 25px;
}
.src-box{

}
</style>
